<template>
  <div class="iconfont-container layout-pd">
    <el-card
      shadow="hover"
      :header="`iconfont 字体图标(自动载入)：${state.sheetsIconList.length}个`">
      <el-row class="iconfont-row">
        <el-col
          :xs="12"
          :sm="8"
          :md="6"
          :lg="4"
          :xl="2"
          v-for="(v, k) in state.sheetsIconList"
          :key="k">
          <div class="iconfont-warp">
            <div class="flex-margin">
              <div class="iconfont-warp-value">
                <i :class="v" class="iconfont"></i>
              </div>
              <div class="iconfont-warp-label mt10">{{ v }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card
      shadow="hover"
      :header="`element plus 字体图标(自动载入，增加了 ele- 前缀，使用时：ele-Aim)：${state.sheetsIconList.length}个`">
      <el-row class="iconfont-row">
        <el-col
          :xs="12"
          :sm="8"
          :md="6"
          :lg="4"
          :xl="2"
          v-for="(v, k) in state.sheetsIconList"
          :key="k">
          <div class="iconfont-warp">
            <div class="flex-margin">
              <div class="iconfont-warp-value">
                <SvgIcon :name="v" :size="30" />
              </div>
              <div class="iconfont-warp-label mt10">{{ v }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="pagesIocnfont">
  import { reactive, onMounted, nextTick } from 'vue'
  import * as svg from '@element-plus/icons-vue'
  //   import initIconfont from '/@/utils/getStyleSheets'

  // 定义变量内容
  const state = reactive({
    title: '',
    sheetsIconList: []
  })

  // 初始化获取 css 样式，这里使用阿里的图标(记得加上前缀 `iconfont`)，其它第三方请自行做判断
  const initGetStyleSheets = () => {
    // initIconfont.ali().then((res: any) => {
    //   // state.sheetsIconList = res
    // })
  }

  // 页面加载时
  onMounted(() => {
    initGetStyleSheets()
  })

  // 获取阿里字体图标
  const getAlicdnIconfont = () => {
    return new Promise((resolve, reject) => {
      nextTick(() => {
        const styles: any = document.styleSheets
        let sheetsList = []
        let sheetsIconList = []
        for (let i = 0; i < styles.length; i++) {
          if (styles[i].href && styles[i].href.indexOf('at.alicdn.com') > -1) {
            sheetsList.push(styles[i])
          }
        }
        for (let i = 0; i < sheetsList.length; i++) {
          for (let j = 0; j < sheetsList[i].cssRules.length; j++) {
            if (
              sheetsList[i].cssRules[j].selectorText &&
              sheetsList[i].cssRules[j].selectorText.indexOf('.icon-') > -1
            ) {
              sheetsIconList.push(
                `${sheetsList[i].cssRules[j].selectorText.substring(1, sheetsList[i].cssRules[j].selectorText.length).replace(/\:\:before/gi, '')}`
              )
            }
          }
        }
        if (sheetsIconList.length > 0) resolve(sheetsIconList)
        else reject('未获取到值，请刷新重试')
      })
    })
  }

  // 初始化获取 css 样式，获取 element plus 自带 svg 图标，增加了 ele- 前缀，使用时：ele-Aim
  const getElementPlusIconfont = () => {
    return new Promise((resolve, reject) => {
      nextTick(() => {
        const icons = svg as any
        const sheetsIconList = []
        for (const i in icons) {
          sheetsIconList.push(`ele-${icons[i].name}`)
        }
        if (sheetsIconList.length > 0) resolve(sheetsIconList)
        else reject('未获取到值，请刷新重试')
      })
    })
  }
</script>

<style scoped lang="scss">
  .iconfont-container {
    .iconfont-row {
      border-top: 1px solid var(--next-border-color-light);
      border-left: 1px solid var(--next-border-color-light);
      .iconfont-warp {
        text-align: center;
        border-right: 1px solid var(--next-border-color-light);
        border-bottom: 1px solid var(--next-border-color-light);
        height: 120px;
        overflow: hidden;
        display: flex;
        transition: all 0.3s ease;
        &:hover {
          box-shadow: 0 2px 12px var(--next-color-dark-hover);
          cursor: pointer;
          transition: all 0.3s ease;
          .iconfont-warp-value {
            i {
              color: var(--el-color-primary);
              transition: all 0.3s ease;
            }
          }
          .iconfont-warp-label {
            color: var(--el-color-primary);
            transition: all 0.3s ease;
          }
        }
        .iconfont-warp-value {
          i {
            color: #606266;
            font-size: 32px;
            transition: all 0.3s ease;
          }
        }
        .iconfont-warp-label {
          color: #99a9bf;
          transition: all 0.3s ease;
        }
      }
    }
  }
</style>
